import React from 'react'
import {
  Flex,
  Stack,
  Text,
  IconButton
} from '@chakra-ui/core'
import { AiOutlineWeibo, AiOutlineWechat, AiOutlineQq } from 'react-icons/ai'

function SocialWay ({ type }) {
  return (
    <Flex w="100%" pt="30px" direction="column">
      <Text color="#999" fontSize="sm" textAlign="center">社交账号{type}</Text>
      <Stack direction="row" justify="center" mt={3}>
        <IconButton bgColor="white" color="#e05244" fontSize="30px" _hover={{ bgColor: 'white' }} _focus={{ boxShadow: 'none' }} _active={{ bg: 'none' }} icon={<AiOutlineWeibo />} />
        <IconButton bgColor="white" color="#00bb29" fontSize="30px" _hover={{ bgColor: 'white' }} _focus={{ boxShadow: 'none' }} _active={{ bg: 'none' }} icon={<AiOutlineWechat />} />
        <IconButton bgColor="white" color="#498ad5" fontSize="30px" _hover={{ bgColor: 'white' }} _focus={{ boxShadow: 'none' }} _active={{ bg: 'none' }} icon={<AiOutlineQq />} />
      </Stack>
    </Flex>
  )
}

export default SocialWay